import React from 'react';

export default class Weather extends React.Component {

    constructor(props){
        super(props);
        this.state = {
            weatherData : this.dealWeatherData(props.data),
            quality : this.dealQuality(props.data.quality)
        };
    };

    dealQuality(quality){
        var type = 'col-blue';
        if('良' == quality || '中度污染' == quality || '轻度污染' == quality){
            type = 'col-orange';
        }else if('差' == quality || '重度污染' == quality || '严重污染' == quality){
            type = 'col-gray';
        }

        return type;
    };


    dealWeatherData(data){
        return {
            city : {values:[data.city,data.timepoint.split(' ')[0]],className : 'city'},
            pm : {icon : 'images/pm25.png',value : data.pm2_5,className : 'pm'},
            no : {icon : 'images/no2.png',value : data.no2,className:'no'},
            co : {icon : 'images/co.png',value : data.co,className:"coandso"},
            so : {icon : 'images/so2.png',value : data.so2,className:"coandso"},
            type : {icon : 'images/feng.png',value : data.quality.length > 2 ? data.quality.substr(0,2) : data.quality,desc:'  空气质量',className:"air"},
            amount : {value:data.total_sales,ts:['多路片','累计销售'],className:"amount"},
            aqi : {icon : 'images/down.png',value : data.reduce_aqi,desc:'  多路片累计降低AQI',className:"aqi"}
        };
    };

    render(){
        return (
            <div className="weather">
                {this.weatherBlockTop()}
                {this.weatherBlockBottom()}
            </div>
        );
    };

    weatherBlockTop(){
        return (
            <div className='top'>
                <ul className="weather-list">
                    <li>{this.renderData(this.state.weatherData.city)}</li>
                    <li>
                    {this.renderData(this.state.weatherData.pm)}
                    {this.renderData(this.state.weatherData.no)}
                    </li>
                    <li>{this.renderData(this.state.weatherData.co)}</li>
                    <li>{this.renderData(this.state.weatherData.so)}</li>
                </ul>
            </div>
        );
    };

    weatherBlockBottom(){
        return (
            <div className='bot'>
                <ul className="weather-botlist">
                    <li>{this.renderData(this.state.weatherData.type)}</li>
                    <li>{this.renderData(this.state.weatherData.amount)} </li>
                    <li>{this.renderData(this.state.weatherData.aqi)}</li>
                </ul>
            </div>
        );
    };

    renderData(data){
        return (
            <div className={data.className + ' ' + this.state.quality}>
                {data.values ? this.renderValueArray(data.values): ''}
                {data.icon ? this.renderIcon(data.icon) : ''}
                {data.value? this.renderValue(data.value) : ''}
                {data.desc ? this.renderDesc(data.desc) : ''}
                {data.ts ? this.renderTs(data.ts) : ''}
            </div>
        );
    };

    renderDesc(desc){
        return (
            <div>{desc}</div>
        );
    };

    renderValue(value){
        return (
            <div>
                <span>{value}</span>
            </div>
        );
    };

    renderIcon(icon){
        return (
            <div><img src={icon}/></div>
        );
    };

    renderValueArray(values) {
        return (values.map(function (v,i) {
            return <p key={i}>{v}</p>
        }));
    }
    renderTs(ts){
        return (
            <div>{ts.map(function (v,i) {return <p key={i}>{v}</p>})}</div>
        );
    };
};